<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <table border="1 solid" aria-colspan="0" cellpadding="0">
        <tr>
            <td>支付流水号</td>
            <td>订单流水号</td>
            <td>用户id</td>
            <td>交易金额</td>
            <td>操作</td>
        </tr>
        <tr v-for="(pay, index) in response.data">
            <td>{{ pay.payNo }}</td>
            <td>{{ pay.orderNo }}</td>
            <td>{{ pay.userId }}</td>
            <td>{{ pay.amount }}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</div>

<!-- 1.引入axios依赖 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 2.发请求 -->
<script type="module">
    <!-- 1. 引入vue模块 -->
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        data(){
            return {
                payList: []
            }
        },
        // 钩子函数发请求
        mounted.function () {
            // 在 node.js 用GET请求获取远程图片
            axios({
                method: 'get',
                url: 'http://localhost:8001/provider/pay/selectAll',
                responseType: 'application.json'
            }).then(responce => {
                // 成功的回调 responce表示响应的所有的数据（包括响应头、响应体等），responce.data 接口响应的核心数据
                // console.log(responce.data)
                // alert(responce.data)
                this.payList = responce.data;
            }).catch(error => {
                // 失败的回调
                console.log(error)
                // alert(error)
            })
        }
    }).mount('#app');



    // 发起一个post请求
    // const pay = {
    //     "payNo": "pay202403081001", //支付流水号
    //     "orderNo": "pay202403081002", //订单流水号
    //     "userId": 6, //用户id
    //     "amount": 29.9 //交易金额
    // }
    // axios({
    //     method: 'post',
    //     url: 'http://localhost:8001/provider/pay/add',
    //     data: pay
    // }).then(responce => {
    //     // 成功的回调 responce表示响应的所有的数据（包括响应头、响应体等），responce.data 接口响应的核心数据
    //     console.log(responce.data)
    //     // alert(responce.data)
    // }).catch(error => {
    //     // 失败的回调
    //     console.log(error)
    //     // alert(error)
    // })

</script>

</body>
</html>